<template>
	<view class="container">
		<!-- 提现 -->
		<view class="tixian">
			<view class="tixian1">
				<text>{{userinfo.usdt}} USDT</text>
				<text class="tixian3">{{$t('tixian.yuer')}}</text>
			</view>
		</view>
		<!-- 记录 -->
		<view class="jilu">
			<view class="jilu1">
			<z-tabs :list="tabList" @change="tabsChange" inactive-color="#fff" active-color="#fff" bg-color="#001d57"/>	
			</view>
			
			<z-paging ref="paging" v-model="dataList" use-page-scroll :auto-show-back-to-top="true"
				:showRefresherUpdateTime="true" @query="queryList">
				<view class="jilu2" v-for="(item,index) in dataList">
					<view class="jilu3">
						<view class="jilu4">
							<text class="jilu4-tixian">{{item.title}}</text>
							<text class="jilu4-tixian1" v-if="item.df_dizhi!=null">{{$t('my.duifandizhi')}}{{formatNumber(item.df_dizhi)}}</text>
							<text class="jilu4-date">{{item.datetime}}</text>
						</view>
						<view class="jilu5">
							<text class="jilu5-jia" v-if="tabIndex==0">+{{item.money}}</text>
							<text v-else>{{item.money}}</text>
						</view>
					</view>
				</view>

			</z-paging> 
		</view>

	</view>
</template>

<script>
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	export default {
		mixins: [ZPMixin],
		data() {
			return {
				tabList: [this.$t('tixian.shouyi'),this.$t('tixian.xiaofei')],
				tabIndex: 0,
				dataList:[],
				money:'',
				userinfo:{}
			}
		},
		onLoad() {
		this.userinfo=uni.getStorageSync('userinfo')
				
		},
		methods: {
			// 格式数字
			formatNumber(number) {
				// 处理 undefined 或 null 的情况
				if (!number) return '';
				// 将数字转化为字符串
				const str = number.toString();
				// 提取前四位和后四位，中间用省略号代替
				const start = str.slice(0, 5);
				const end = str.slice(-5);
				return `${start}......${end}`;
			},
			tabsChange(index) {
				this.tabIndex = index;
				// 当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
				this.$refs.paging.reload();
			},
			// 列表
			queryList(pageNo, pageSize) {
				let data = {
					yema:pageNo,
					yezhi:pageSize,
					pay_type:'usdt',
					type:this.tabIndex+1
				}
				let opts = {
					url: '/user/mx',
					method: 'GET'
				};
				// console.log('打印入参',data);
				this.api.httpTokenRequest(opts, data).then(res => {
					// console.log('列表', res);
					if (res[1].data.state == 'success') {
				this.$refs.paging.complete(res[1].data.list)
					}
				
				})
			},
		},
	}
</script>

<style>
	.container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tixian {
		width: 84%;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		border: 1rpx solid #cee8fc;
		margin-top: 30rpx;
	}

	.tixian1 {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 38rpx;
		font-weight: 700;
		margin-bottom: 15rpx;
	}

	.tixian2 {
		width: 100%;
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: 500;
	}

	.tixian3 {
		margin-top: 15rpx;
		font-size: 26rpx;
		font-weight: 500;
	}

	.tiixananniu {
		width: 240rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #9498e6;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}
	.jilu{
		width: 94%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		border-radius: 10rpx;
		/* background-color: #1b2587; */
		border: 1rpx solid #cee8fc;
	}
	.jilu1{
		width: 100%;
		
	}
	.jilu2{
		width: 640rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		border-bottom: 1rpx solid #32356d;
	}
	.jilu3{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
		
	}
	.jilu4{
		display: flex;
		flex-direction: column;
	}
	.jilu4-tixian{
		font-size: 28rpx;
		font-weight: 700;
	}
	.jilu4-tixian1{
		font-size: 26rpx;
	}
	.jilu4-date{
		font-size: 24rpx;
		margin-top: 15rpx;
		color: #a1a1a1;
	}
	.jilu5{
		font-size: 30rpx;
		font-weight: 700;
	}
	.jilu5-jia{
		color: #9ea5ff;
	}
	/* 弹框 */
	.tankuan{
		width: 480rpx;
		height: 400rpx;
		border-radius: 20rpx;
		background-color: #454545;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
	}
	.tankuan1{
		width: 100%;
		display: flex;
		justify-content: end;
	}
	.tankuan1-img{
		width: 40rpx;
		height: 40rpx;
	}
	.tankuan2{
		margin-top: 30rpx;
		font-size: 28rpx;
		font-weight: 700;
	}
	.tankuan3{
		width: 90%;
		padding: 20rpx;
		background-color: #7d7d7d;
		border-radius: 10rpx;
		margin-top: 30rpx;
	}
	.tankuan4{
		width: 100%;
		display: flex;
		justify-content: end;
		margin-top: 20rpx;
		font-size: 28rpx;
	}
	.tankuan5{
		width: 280rpx;
		height: 80rpx;
		background-color: #4b50a4;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
	}
</style>